<template>
    <view class="container">
        <view class="top">
            <view class="flex">
                <text>账期：</text>
                <text>{{ startDate }} 至 </text>
                <uni-datetime-picker
                    type="date"
                    :value="endDate"
                    :start="startDate"
                    :end="allowEndDate"
                    ref="endDate"
                    @change="confirmEndDate">
                    <view class="calendar-box">
                        <view>{{ endDate }}</view>
                        <image class="icon-calendar" src="/pages_supplier/static/icon-calendar.png"></image>
                    </view>
                </uni-datetime-picker>
            </view>
            <view class="total-box" v-if="showData">
                <view class="price">￥{{ totalData.Total }}</view>
                <view class="price-title">结算金额</view>
                <view class="flex-s-c">
                    <view class="left">
                        <image class="icon" src="/pages_supplier/static/icon-2.png"></image>
                        <view class="right-box">
                            <view class="tle">付款总额</view>
                            <view class="price-1">￥{{ totalData.CashMoney }}</view>
                        </view>
                    </view>
                    <view class="right">
                        <image class="icon" src="/pages_supplier/static/icon-3.png"></image>
                        <view class="right-box">
                            <view class="tle">退款总额</view>
                            <view class="price-1">￥{{ Math.abs(totalData.RefundMoney) }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="msg-box" v-else>请先选择账期结束日期</view>
        </view>
        <view class="bottom" v-if="showData">
            <view class="tab-box">
                <view class="tabs">
                    <view
                        class="tab-item"
                        v-for="(item, index) in tabs"
                        :key="index"
                        :class="tabIndex == index ? 'tab-active' : ''"
                        @click="tabIndex = index">
                        {{ item }}
                    </view>
                </view>
            </view>
            <view class="main">
                <swiper
                    class="swiper product-main-list"
                    :style="{ height: listHeight }"
                    :current="tabIndex"
                    @change="swiperChange">
                    <swiper-item v-for="(swiperItem, swiperIndex) in tabs" :key="swiperIndex">
                        <order-list
                            v-if="loadOk"
                            :ref="'productList_' + swiperIndex"
                            :moneyType="swiperIndex"
                            :height="listHeight"
                            :requestData="requestData"></order-list>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="footer">
            <view class="btn btn-success" @click="submit">提交结算</view>
        </view>
    </view>
</template>

<script>
import { GetSupplierInfo } from "@/pages_supplier/service/api/supplier.js"
import { GetSettlement, GeneratePeriod } from "@/pages_supplier/service/api/period.js"
import { mapGetters } from "vuex"
import orderList from "@/pages_supplier/components/account/order-list.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import utils from "@/utils/utils.js"
export default {
    components: {
        orderList,
    },
    data() {
        return {
            tabs: ["付款明细", "退款明细"],
            tabIndex: 0,
            startDate: "",
            allowEndDate: "",
            endDate: "",
            showData: false,
            listHeight: "", //list所需高度
            loadOk: false,
            totalData: {},

            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isloadding: false,

            searchKey: "",
            requestData: {
                startTime: "",
                endTime: "",
            },
        }
    },
    watch: {
        //监听更新
        getUpOrderAccountView(e) {
            this.refresh()
        },
        startDate(e) {
            console.log(e)
            this.requestData.startTime = e
        },
        endDate(e) {
            console.log(e)
            if (e && e != "") {
                this.showData = true
            }
        },
        showData(e) {
            if (e == true) {
                setTimeout(() => {
                    this.getListHeight()
                }, 100)
            }
        },
    },
    computed: {
        ...mapGetters(["getUpOrderAccountView"]),
    },
    onLoad(e) {
        if (e.tabIndex) {
            this.tabIndex = e.tabIndex
        }
    },
    onShow() {},
    mounted() {
        this.getInfo()
        this.allowEndDate = utils.yesterday().startDate
        // this.allowEndDate="2022-02-10"
        // this.endDate=utils.yesterday().startDate
        console.log(this.allowEndDate)
    },
    methods: {
        getInfo() {
            GetSupplierInfo().then((res) => {
                if (res.State == 1) {
                    console.log(res.Data)
                    this.startDate = res.Data.PeriodTime.split(" ")[0]
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        GetSettlement(endTime) {
            GetSettlement(endTime).then((res) => {
                if (res.State == 1) {
                    console.log(res.Data)
                    this.totalData = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        GeneratePeriod(endTime) {
            GeneratePeriod(endTime).then((res) => {
                if (res.State == 1) {
                    console.log(res.Data)
                    this.easyGoTo("/pages_supplier/packet/account/comeAndGo")
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.show()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.endDate = e
            this.requestData.endTime = this.endDate
            this.$forceUpdate()
            this.GetSettlement(this.endDate)
            this.refresh()
        },
        submit() {
            if (!this.endDate) {
                this.easyToast("请先选择账期结束日期")
                return
            }
            this.GeneratePeriod(this.endDate)
        },
        refresh() {
            this.$refs.productList_0[0].refresh(this.requestData)
            this.$refs.productList_1[0].refresh(this.requestData)
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                console.log(e)
                this.listHeight = e - 60 + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            this.tabIndex = e.detail.current
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.uni-calendar-item--disable {
    uni-text {
        color: #c0c0c0;
    }
}
.container {
    padding-bottom: 120rpx;

    .top {
        background: #fff;
        padding: 28rpx 32rpx 100rpx;

        .flex {
            align-items: center;

            text {
                font-size: 30rpx;
            }
        }

        .calendar-box {
            border-radius: 28rpx;
            height: 56rpx;
            width: 276rpx;
            margin-left: 12rpx;
            border: 1px solid currentColor;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 22rpx;

            .icon-calendar {
                width: 40rpx;
                height: 40rpx;
            }
        }

        .total-box {
            margin-top: 22rpx;
            background: rgba(219, 0, 50, 0.1);
            border-radius: 32rpx;
            padding: 32rpx;

            .price {
                font-size: 64rpx;
                font-weight: bold;
                text-align: center;
            }

            .price-title {
                font-size: 28rpx;
                color: $color-gray-2;
                text-align: center;
                margin-bottom: 24rpx;
            }

            .left,
            .right {
                width: calc(50% - 15rpx);
                box-sizing: border-box;
                background: #fff;
                border-radius: 24rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 28rpx;

                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 28rpx;
                    flex-shrink: 0;
                    flex-grow: 0;
                }

                .right-box {
                    flex: 1;

                    .tle {
                        font-size: 26rpx;
                        color: $color-gray-2;
                    }

                    .price-1 {
                        font-size: 40rpx;
                        font-weight: bold;
                        letter-spacing: -4rpx;
                        margin-left: -6rpx;
                    }
                }
            }
        }

        .msg-box {
            text-align: center;
            margin-top: 60rpx;
        }
    }

    .bottom {
        margin-top: -70rpx;
        background: #f7f7f7;
        border-radius: 56rpx 56rpx 0 0;
        padding-top: 32rpx;

        .tab-box {
            display: flex;
            align-items: center;
            justify-content: center;

            .tabs {
                display: flex;
                align-items: center;
                width: 360rpx;
                height: 64rpx;
                border-radius: 32rpx;
                background: #e7e7e9;

                .tab-item {
                    flex: 1;
                    color: $color-gray-2;
                    text-align: center;
                    line-height: 64rpx;
                }

                .tab-active {
                    color: #fff;
                    background: #3f4156;
                    border-radius: 32rpx;
                }
            }
        }
    }
}

.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
        // width: 304rpx;
        flex: 1;
        height: 80rpx;
        margin: 0 23rpx;
    }
}
</style>
